<!-- 年规 - 团建规划 - 主页 -->
<template>
  <z-paging-list ref="list" v-model="state.list" @loadData="loadData">
    <template #top>
      <view class="flex justify-between items-center px-3.75 py-3 text-28 c-#999">
        <view class="flex-1">币种：{{ currencyName }}</view>
        <view v-if="isSocietyManager" @click="onChargeUserClick">
          <text>负责人：</text>
          <text class="c-primary">{{ state.chargeUser?.nickname || '待添加' }}</text>
        </view>
        <view v-else>负责人：{{ state.chargeUser?.nickname || '--' }}</view>
      </view>
    </template>
    <view v-for="(item, index) in state.list" :key="index" class="card" @click="navigate(`add?id=${item.id}`)">
      <view class="flex items-center">
        <view class="pr-2 text-40 c-primary font-bold text-maxline-1">活动{{ index + 1 }}</view>
        <u-icon name="arrow-right" size="24" color="#666" />
      </view>
      <image v-if="isSocietyManager || isPlanManager" class="btn-delete" src="/static/images/common/ic_delete_primary.png" @click.stop="onDelete(item)" />
      <view class="mt-3 px-3.75 py-2 bg-#f6f6f6">
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">时间</view>
          <view class="flex-1">{{ item.active_time || ''}}</view>
        </view>
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">团建活动名称</view>
          <view class="flex-1">{{ item.name || ''}}</view>
        </view>
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">活动目的</view>
          <view class="flex-1">{{ item.purpose || ''}}</view>
        </view>
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">活动地点</view>
          <view class="flex-1">{{ item.address || ''}}</view>
        </view>
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">参加人员</view>
          <view class="flex-1">{{ item.participant || ''}}</view>
        </view>
        <view class="flex items-center mb-1">
          <view class="flex-shrink-0 w-194">人均预算</view>
          <view class="flex-1">{{ numFormat(item.capita_budget || 0) }}</view>
        </view>
      </view>
      <view v-if="item.status == 1" class="flex justify-end mt-2 text-28 c-primary">已完成</view>
      <view v-else-if="item.status == 2" class="flex justify-end mt-2 text-28 c-#FF513A">未完成</view>
    </view>
    <template #bottom>
      <view v-if="isSocietyManager || isPlanManager" class="px-3.75 pt-1.5 bg-white" @click="navigate(`add`)">
        <view class="btn-primary">添加团建规划</view>
      </view>
    </template>
  </z-paging-list>
</template>
<script setup>
import { showToast, showModal, navigate } from '@/common/util/uni';
import { numFormat } from '@/common/util/format'
import { getTeamBuildList, getTeamBuildCharge, postTeamBuildChargeAdd, deleteTeamBuild } from '@/common/http/module/plan';

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const list = ref()
const state = reactive({
  chargeUser: '',
  list: []
})

const currencyName = computed(() => planStore.currency?.label || '未添加')
const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == state.chargeUserg?.id)

function loadData(page) {
  getTeamBuildList(userStore.currentSocietyId, planStore.year, page).then(res => {
    list.value.onLoadResult(res.data.data || [])
  }).catch(() => {
    list.value.onLoadResult([])
  })
}

function loadChargeUser() {
  getTeamBuildCharge(userStore.currentSocietyId, planStore.year).then(res => {
    const data = res.data
    if (data) {
      state.chargeUser = {
        user_id: data.construction_planning_id,
        nickname: data.construction_planning?.nickname
      }
    }
  })
}

function onDelete(item) {
  showModal({
    content: '确定要删除这个活动吗?',
    confirmText: '取消',
    cancelText: '确定',
    success: ({ confirm }) => {
      if (confirm) return
      deleteTeamBuild(item.id).then(() => {
        showToast('删除成功')
        refresh()
      })
    }
  })
}

function onChargeUserClick() {
  const ids = state.chargeUser?.user_id
  navigate(`/package_plan/pages/user/select?ids=${ids}&singleSelect=true`)
}

function onMemberChange(list) {
  if (!list || list.length == 0) return
  const user = list[0]
  state.chargeUser = {
    user_id: user.user_id,
    nickname: user.user?.nickname
  }
  postTeamBuildChargeAdd(userStore.currentSocietyId, planStore.year, user.user_id)
}

function refresh() {
  list.value.onRefresh()
}

onLoad(() => loadChargeUser())

defineExpose({ onMemberChange, refresh })
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.card {
  position: relative;
  margin: 0 30rpx 20rpx 30rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -2rpx 4rpx 12rpx 2rpx rgba(206, 143, 12, 0.1);
  overflow: hidden;

  .btn-delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 71rpx;
    height: 50rpx;
  }
}
</style>
